<template>
  <view :style="themeColor">
    <!-- <view class="pageheader" style="">
    </view> -->
    <view class="page">

      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout homePage_flex_0">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd0_0" @change="bannerIndexfd0_0 = $event.detail.current"
            class='flex position-relative homePage_fd0_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>

            <template v-for='(item,key0) in lunboList'>
              <swiper-item class='flex  homePage_fd0_0' :key='key0' @click.stop="godetail(item)">
                <image class='homePage_fd0_0_c1_c0' mode="aspectFill" :src='item.thumb'></image>
              </swiper-item>
            </template>

          </swiper>
          <view style="position: absolute" class="flex dot flex align-center justify-center homePage_swiperDotfd0_0">
            <template v-for="(item, index) in (lunboList.length)">
              <view :key="index" v-if="bannerIndexfd0_0 == index"
                class="flex dot selected flex align-center justify-center homePage_swiperDotSelectedfd0_0">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center homePage_swiperDotUnselectedfd0_0">
              </view>
            </template>
          </view>
        </view>
      </view>
      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap justify-between benben-flex-layout homePage_flex_1">
        <template v-for='(item,key0) in jingangList'>
          <view class='flex flex-direction flex-wrap align-center ' style="width: 20%;" @tap.stop="gohrdf(item)"
            :key='key0'>
            <image class='homePage_fd1_0_c0' mode="aspectFill" :src='item.thumb'></image>
            <view class='homePage_fd1_0_c1'>{{item.name}}</view>
          </view>
        </template>

      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout homePage_flex_2">
        <view class='flex flex-wrap align-center homePage_fd2_0'>
          <!-- <image class='homePage_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"40.png"'></image> -->
          <view class="text-cut homePage_fd2_0_c0" style="color: #987040;margin-top: 10rpx;"> {{$t('文章推荐')}}</view>
          <view class='flex  homePage_fd2_0_c1'></view>
          <view style="position: relative;top: -10rpx;">
            <swiper @change="bannerIndexfd2_0_c2 = $event.detail.current"
              class='flex position-relative homePage_fd2_0_c2' previous-margin="0rpx" next-margin="0rpx"
              :display-multiple-items="1" :vertical='true' :interval="5000" :duration="500" :autoplay='true'
              :circular='true'>

              <template v-for='(item,key0) in articleList'>
                <swiper-item class='flex  homePage_fd2_0_c2_c1' :key='key0' @tap.stop="handleJumpDiy"
                  data-type="navigateTo" :data-url="`/pages/shouye/articleDetails/articleDetails?id=${item.aid}`">
                  <text class='homePage_fd2_0_c2_c1_c0'>{{item.title}}</text>
                </swiper-item>
              </template>

            </swiper>
          </view>
          <view class='flex flex-wrap align-center homePage_fd2_0_c3' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/shouye/articleRecommendation/articleRecommendation`">
            <text class='homePage_fd2_0_c3_c0'>{{$t('更多')}}</text>
            <image class='homePage_fd2_0_c3_c1' mode="aspectFit" :src='STATIC_URL+"41.png"'></image>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout homePage_flex_3">
        <view class='flex flex-direction flex-wrap align-stretch homePage_fd3_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/shouye/buddhistCalendar/buddhistCalendar?riqi=${riqi}`">
          <view class='flex flex-wrap align-center justify-center'>
            <text class='homePage_fd3_0_c0_c0'>{{cancelInfo.folineirong}}</text>
          </view>
          <view class='flex flex-wrap align-center homePage_fd3_0_c1'>
            <view class='flex flex-direction flex-wrap align-start homePage_fd3_0_c1_c0'>
              <text class='homePage_fd3_0_c1_c0_c0'>{{riqi}}</text>
              <view class='flex  homePage_fd3_0_c1_c0_c2'></view>

              <view class='flex flex-wrap align-center'>
                <text class='homePage_fd3_0_c1_c0_c3_c0'>{{pms}}</text>
                <h-time-roll ref="timeRoll" v-if="isIos==1"></h-time-roll>
                <view v-else>{{timess}}</view>
              </view>
            </view>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub homePage_fd3_0_c1_c1'>
              <view class='flex flex-wrap align-center justify-between homePage_fd3_0_c1_c1_c0'
                v-for="(item,index) in cancelInfo.day_list" :key="index">
                <text class='homePage_fd3_0_c1_c1_c0_c0'>{{item.name}}</text>
                <text class='homePage_fd3_0_c1_c1_c0_c0'>{{item.sum_day}}{{$t('天')}}</text>
              </view>
              <!-- <view class='flex flex-wrap align-center justify-between homePage_fd3_0_c1_c1_c0'>
                <text class='homePage_fd3_0_c1_c1_c0_c0'>华严菩萨圣诞日</text>
                <text class='homePage_fd3_0_c1_c1_c0_c0'>106 天后</text>
              </view>
              <view class='flex flex-wrap align-center justify-between homePage_fd3_0_c1_c1_c0'>
                <text class='homePage_fd3_0_c1_c1_c0_c0'>弥勒菩萨圣诞日</text>
                <text class='homePage_fd3_0_c1_c1_c0_c0'>106 天后</text>
              </view> -->
            </view>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex align-center justify-between benben-flex-layout homePage_flex_4">
        <view class='flex flex-direction align-start homePage_fd4_0' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/shouye/academicOffice/academicOffice`">
          <view class='flex flex-wrap align-center'>
            <text class=' text-cut-2 homePage_fd4_0_c0_c0'>{{$t('教务处')}}</text>
          </view>
          <view class='flex flex-wrap align-center homePage_fd4_0_c1'>
            <text class='text-cut-2 homePage_fd4_0_c1_c0'>{{$t('快来报名课程学习吧')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-center homePage_fd4_0_c2'>
            <text class='text-cut-2 homePage_fd4_0_c2_c0'>GO</text>
          </view>
        </view>
        <view class='flex flex-direction align-start homePage_fd4_1' @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/shouye/psychologicalCounseling/psychologicalCounseling`">
          <view class='flex flex-wrap align-center'>
            <text class='text-cut-2 homePage_fd4_0_c0_c0'>{{$t('预约参访')}}</text>
          </view>
          <view class='flex flex-wrap align-center homePage_fd4_0_c1'>
            <text class='text-cut-2 homePage_fd4_0_c1_c0'>{{$t('欢迎来寺参观探索灵岩之美')}}</text>
          </view>
          <view class='flex flex-wrap align-center justify-center homePage_fd4_0_c2'>
            <text class='homePage_fd4_0_c2_c0'>GO</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-end benben-flex-layout homePage_flex_5">
        <!--    <view class='flex flex-wrap align-center justify-center homePage_fd5_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/shouye/charitableDonations/charitableDonations`">
          <text class='text-cut homePage_fd5_0_c0'>{{$t('捐')}}</text>
        </view>
        <view class='flex flex-wrap align-center justify-center homePage_fd5_1' @tap.stop="handleJumpDiy"
          data-type="switchTab" :data-url="`/pages/tabBar/donationPage/donationPage`">
          <text class='text-cut homePage_fd5_0_c0'>{{$t('施')}}</text>
        </view> -->
        <view class='flex flex-wrap align-center justify-center margin-top homePage_fd5_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/wode/inviteFriends/inviteFriends`">
          <text class='text-cut homePage_fd5_0_c0'>{{$t('邀')}}</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>

    <app-update ref="update" :auto="true"></app-update>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "bannerIndexfd2_0_c2": 0,
        "bannerIndexfd0_0": 0,
        "jingangList": [],
        "lunboList": [],
        "articleList": [],
        riqi: "",
        cancelInfo: {
          folineirong: '',
          day_list: [],
          ji: '',
          name: '',
          sum_day: '',
          time: '',
          yi: ''
        },
        timer: '',
        timerJia: '',
        pms: '',
        isIos: 0,
        timess: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {




      console.log('this.riqi', this.riqi)
      if (global.appTabBarType) this.toHomeDiy()
      this.timer = setInterval(res => {
        this.getLunboFunc()
        this.getJingangFunc()
        this.getListFunc()
      }, 500)
    },
    onUnload() {

    },
    onReady() {
      // #ifdef APP
      this.$util.debounce(
        () => {
          this.$refs.update.checkAppUpdate()
        },
        1000,
        true
      )
      // #endif

    },
    onShow() {
      if (uni.getSystemInfoSync().platform == 'ios') {
        this.$nextTick(() => {
          this.$refs.timeRoll.openTime()
        })
      }
      let that = this
      // var timeStamp = new Date();
      // this.riqi = this.$util.timeFormat(timeStamp)
      // uni.getSystemInfoSync().platform == 'ios'
      if (uni.getSystemInfoSync().platform == 'ios') {
        that.isIos = 1
        const toronto = Intl.DateTimeFormat('en', {
          timeZone: 'America/Vancouver',
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        }).format(new Date());
        let date = toronto.split(',')
        that.riqi = date[0]
        let jtiems = date[1].split(' ')
        that.pms = jtiems[2]
        that.getCAncel()
      } else {
        that.isIos = 0
        that.timerJia = setInterval(reslut => {
          that.$api.post(global.apiUrls.post664ac01bd2df1).then(res => {
            if (res.data.code == 1) {
              that.riqi = res.data.data.date
              that.timess = res.data.data.time
              console.log(res.data.data, '5555')
              that.getCAncel()
            }
          })
        }, 1000)

      }
      this.getJingangFunc()
      uni.setTabBarItem({
        index: 0,
        text: this.$t('首页'),
        iconPath: '/static/tab/tab_diy0.png',
        selectedIconPath: '/static/tab/tab_diy0_active.png'
      })
      uni.setTabBarItem({
        index: 1,
        text: this.$t('灵岩妙音'),
        iconPath: '/static/tab/tab_diy1.png',
        selectedIconPath: '/static/tab/tab_diy1_active.png'
      })
      uni.setTabBarItem({
        index: 2,
        text: this.$t('功德'),
        iconPath: '/static/tab/tab_diy2.png',
        selectedIconPath: '/static/tab/tab_diy2_active.png'
      })
      uni.setTabBarItem({
        index: 3,
        text: this.$t('我的'),
        iconPath: '/static/tab/tab_diy3.png',
        selectedIconPath: '/static/tab/tab_diy3_active.png'
      })
    },
    onHide() {
      clearInterval(this.timerJia);
      this.$refs.timeRoll.closeTime()
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      gohrdf(item) {
        uni.navigateTo({
          url: `${item.href}?name=${item.name}`
        })
      },
      godetail(item) {
        uni.navigateTo({
          url: item.href
        })
      },
      getCAncel() {
        this.$api.post(global.apiUrls.post658e5f73b01f3, {
          time: this.riqi
        }).then(res => {
          if (res.data.code == 1) {
            this.cancelInfo = res.data.data
          }
        })
      },
      //获取轮播图
      async getLunboFunc() {
        //请求方法
        //数据验证

        let datalunboList = await this.$api.post(global.apiUrls.post641e624160dd0, {
          type: '1'
        });
        if (datalunboList.data.code != 1) {
          this.$message.info(datalunboList.data.msg);
          return
        }
        let infolunboList = datalunboList.data;
        this.lunboList = infolunboList.data

      },
      //获取金刚区
      async getJingangFunc() {
        //请求方法
        //数据验证

        let datajingangList = await this.$api.get(global.apiUrls.post655f28714571a, {
          operationnavtype_id: '1'
        });

        if (datajingangList.data.code != 1) {
          this.$message.info(datajingangList.data.msg);
          return
        }
        let infojingangList = datajingangList.data;
        this.jingangList = infojingangList.data

      },
      //获取推荐列表
      async getListFunc() {
        //请求方法
        //数据验证
        this.$api.get(global.apiUrls.post658bf371e6090, {

        }).then(res => {
          if (res.data.code == 1) {
            this.articleList = res.data.data.data
          }
        })
        clearInterval(this.timer);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('indexhome.png')) no-repeat, #F7F3ED;
    background-size: 100% auto;
  }

  .pageheader {
    height: 80rpx;
    // background: url(image-path('indexhome.png')) no-repeat, #F7F3ED;
    // background-size: 100% auto;
    width: 100vw;
  }

  .homePage_flex_0 {
    padding: 179rpx 0rpx 0rpx 0rpx;
  }

  .homePage_numberfd0_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .homePage_fd0_0_c1_c0 {
    width: 686rpx;
    height: 320rpx;
    border-radius: 24rpx;
  }

  .homePage_fd0_0 {
    width: 686rpx;
    height: 320rpx;
  }

  .homePage_swiperDotUnselectedfd0_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(228, 194, 151, 0.4);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .homePage_swiperDotSelectedfd0_0 {
    border: 1px solid #00A7FF;
    background: rgba(228, 194, 151, 1);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .homePage_swiperDotfd0_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .homePage_flex_1 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    margin: 40rpx 0rpx 0rpx 0rpx;
    text-align: center;
  }

  .homePage_fd1_0_c1 {
    margin: 17rpx 0rpx 0rpx 0rpx;
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 32rpx;
    height: auto;
  }

  .homePage_fd1_0_c0 {
    width: 106rpx;
    height: 106rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .homePage_flex_2 {
    margin: 40rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .homePage_fd2_0_c3_c1 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd2_0_c3_c0 {
    color: #987040;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .homePage_fd2_0_c3 {
    margin: -20rpx 0rpx 0rpx auto;
  }

  .homePage_numberfd2_0_c2_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .homePage_fd2_0_c2_c1 {
    width: 750rpx;
    height: 110rpx;
  }

  .homePage_fd2_0_c2_c1_c0 {
    color: #987040;
    font-size: 28rpx;
    font-weight: 400;
  }

  .homePage_fd2_0_c2 {
    width: 365rpx;
    height: 40rpx;
  }

  .homePage_swiperDotUnselectedfd2_0_c2 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .homePage_swiperDotSelectedfd2_0_c2 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .homePage_swiperDotfd2_0_c2 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .homePage_fd2_0_c1 {
    background: rgba(228, 194, 151, 0.4);
    width: 1rpx;
    height: 40rpx;
    margin: -10rpx 10rpx 0rpx 10rpx;
    transform: scaleX(0.5);
  }

  .homePage_fd2_0_c0 {
    width: 140rpx;
    height: 70rpx;
    font-size: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd2_0 {
    background: url(image-path('35.png')) no-repeat;
    height: 110rpx;
    background-size: 100% auto;
    padding: 0rpx 29rpx 0rpx 29rpx;
  }

  .homePage_flex_3 {
    margin: 32rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .homePage_fd3_0_c1_c1_c0_c0 {
    color: #333333;
    font-size: 26rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .homePage_fd3_0_c1_c1_c0 {
    border-top: 1px solid rgba(232, 229, 216, 1);
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .homePage_fd3_0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .homePage_fd3_0_c1_c0_c3_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin-right: 10rpx;
  }

  .homePage_fd3_0_c1_c0_c2 {
    background: rgba(232, 229, 216, 1);
    width: 100%;
    height: 1rpx;
    margin: 20rpx 0rpx 20rpx 0rpx;
    transform: scaleY(0.5);
  }

  .homePage_fd3_0_c1_c0_c1 {
    margin: 4rpx 0rpx 0rpx 0rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .homePage_fd3_0_c1_c0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .homePage_fd3_0_c1_c0 {
    background: url(image-path('39.png')) no-repeat;
    background-size: 100% auto;
    padding: 40rpx 24rpx 40rpx 24rpx;
  }

  .homePage_fd3_0_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd3_0_c0_c0 {
    font-size: 36rpx;
    color: rgba(145, 47, 34, 1);
    line-height: 42rpx;
    font-weight: 600;
  }

  .homePage_fd3_0 {
    background: url(image-path('38.png')) no-repeat;
    background-size: 100% auto;
    padding: 32rpx 24rpx 32rpx 24rpx;
  }

  .homePage_flex_4 {
    margin: 32rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .homePage_fd4_1 {
    background: url(image-path('37.png')) no-repeat;
    background-size: 100% auto;
    width: 331rpx;
    height: 280rpx;
    padding: 32rpx 0rpx 32rpx 24rpx;
  }

  .homePage_fd4_0_c2_c0 {
    color: #912F22;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .homePage_fd4_0_c2 {
    background: rgba(228, 194, 151, 1);
    margin: 16rpx 0rpx 0rpx 0rpx;
    width: 80rpx;
    height: 48rpx;
    background-size: 100% auto;
    border-radius: 26rpx;
  }

  .homePage_fd4_0_c1_c0 {
    width: 150rpx;
  }

  .homePage_fd4_0_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd4_0_c0_c0 {
    color: #912F22;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 42rpx;
  }

  .homePage_fd4_0 {
    background: url(image-path('36.png')) no-repeat;
    background-size: 100% auto;
    width: 331rpx;
    height: 280rpx;
    padding: 32rpx 0rpx 32rpx 24rpx;
  }

  .homePage_flex_5 {
    position: fixed;
    right: 32rpx;
    bottom: calc(4% + var(--window-bottom));
  }

  .homePage_fd5_1 {
    background: rgba(152, 112, 64, 1);
    background-size: 100% auto;
    min-width: 80rpx;
    min-height: 80rpx;
    border-radius: 40rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd5_0_c0 {
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 42rpx;
  }

  .homePage_fd5_0 {
    background: rgba(145, 47, 34, 1);
    background-size: 100% auto;
    min-width: 80rpx;
    min-height: 80rpx;
    border-radius: 40rpx;
  }
</style>
